.container {
    width: 400px;
    height: 400px;
    margin: 80px auto 0;
    border: 1px solid #222;
    border-radius: 50%;
    position: relative;
    animation: zd 3s linear infinite;
}
.earth {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: #ccc;
    
    position: absolute;
    top: 100px;
    left: 100px;
    animation: earth 3s linear infinite;
}
.moon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: aqua;
    box-shadow: 0 2px 5px aqua;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%,-50%);
    animation: moon 4s linear infinite;
}
@keyframes zd {
    from {transform: rotate(0);border-color:#222}
    to {transform: rotate(360deg);border-color: red}
}
@keyframes moon {
    from {background-color: aqua;box-shadow: 0 2px 5px aqua;}
    to {background-color: orange;box-shadow: 0 2px 5px orange;}
}
@keyframes earth {
    0%{background-color: #ccc;transform: scale(1)}
    25%{background-color: olivedrab;transform: scale(0.5)}
    50%{background-color: olive;transform: scale(0.25)}
    75%{background-color: mediumspringgreen; transform: scale(0.5)}
    100%{background-color: mediumaquamarine;transform: scale(1)}
}